<template>
  <div class="container">
    <dialog-table ref="dialog" :tableColumns="tbData.tableColumns" :tableBody="tbData.tableBody" @ok="confirm"></dialog-table>
    <div class="w-100 phm-white-bg phm-padding">
      <!-- 表单 -->
      <h2 @click="showDialog"><i class="el-icon-menu" style="color: cornflowerblue;"></i> 单组表单</h2>
      <el-row>
        <el-form ref="form" :model="form" label-width="80px">

          <el-row :gutter="15">
            <el-col :span="12">
              <el-form-item label="多选">
                <select-table v-model="selectTableVal" :fetchFun="fetchFun" :columns="columns" :props="props" :params="params" :multiple="true" :query="query" :fetchTreeFun="fetchTreeFun" :treeProps="treeProps" @change="handleChange">
                  <template #header="{formData}">
                    <el-form-item label="联系电话">
                      <el-input clearable v-model="formData.tel" placeholder="联系电话"></el-input>
                    </el-form-item>
                  </template>
                </select-table>
                {{mapArry(selectTableVal)}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单选">
                <select-table v-model="selectTableVal2" :fetchFun="fetchFun" :columns="columns" :props="props" :params="params" :multiple="false" :query="query" :fetchTreeFun="fetchTreeFun" :treeProps="treeProps">
                  <template #header="{formData}">
                    <el-form-item label="联系电话">
                      <el-input clearable v-model="formData.tel" placeholder="联系电话"></el-input>
                    </el-form-item>
                  </template>
                </select-table>
                {{mapArry(selectTableVal2)}}
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="单选">
                <select-table mode="dialog" v-model="selectTableVal3" :fetchFun="fetchFun" :columns="columns" :props="props" :params="params" :multiple="false" :query="query" :fetchTreeFun="fetchTreeFun" :treeProps="treeProps"
                  @change="handleChange3">
                  <template #header="{formData}">
                    <el-form-item label="联系电话">
                      <el-input clearable v-model="formData.tel" placeholder="联系电话"></el-input>
                    </el-form-item>
                  </template>
                </select-table>
                {{mapArry(selectTableVal3)}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="多选">
                <select-table mode="dialog" v-model="selectTableVal4" :fetchFun="fetchFun" :columns="columns" :props="props" :params="params" :multiple="true" :query="query" :fetchTreeFun="fetchTreeFun" :treeProps="treeProps"
                  @change="handleChange3" placeholder="人员列表">
                  <template #header="{formData}">
                    <el-form-item label="联系电话">
                      <el-input clearable v-model="formData.tel" placeholder="联系电话"></el-input>
                    </el-form-item>
                  </template>
                </select-table>
                {{mapArry(selectTableVal4)}}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>

    </div>
  </div>
</template>

<script>
import SelectTable from '@/components/select-table/index.vue'
import { listSimpleUsers } from "@/api/system/user";
export default {
  name: 'ParentComponent',
  components: {
    SelectTable
  },
  data() {
    return {

      // -------selectTable------
      selectTableVal: [{ id: '7114881700317186276', name: 'liujing' }],
      columns: [
        { prop: 'id', label: 'ID' },
        { prop: 'nickname', label: '用户' },
      ],
      props: {
        label: 'nickname',
        value: 'id',
        keyword: 'nickname'
      },
      query: [{ prop: 'nickname', label: '用户' }],
      params: {  },
      fetchFun: listSimpleUsers,

      // 左侧树形数据
      fetchTreeFun: getDeptTree,
      treeProps: {
        children: 'children',
        label: 'name'
      },
      selectTableVal2: { id: '7114881700317186276', name: 'liujing' },
      selectTableVal3: { id: '7114881700317186276', name: 'liujing' },
      selectTableVal4: [{ id: '7114881700317186276', name: 'liujing' }]
    }


  },
  methods: {
    showDialog() {
      this.$refs.dialog.open();
    },
    confirm(event) {
      console.log(event)
      this.form.value2 = event.filter(obj => obj.selected).map(obj => obj.name).join(',');
    },
    mapArry(event) {
      if (Array.isArray(event)) {
        return event.map(obj => obj.name).join(',');
      } else {
        return event.name
      }
    },
    handleChange(val) {
      console.log(val, '==handleChange')
    },
    handleChange3(val) {
      console.log(val, '==handleChange3')
    }
  }
}
</script>

